<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll()">
      <img src="https://h5.ameimeika.com/mp_images/mp_2.6/jihuo2.png"
           alt=""
           class="img"
           mode="widthFix">
      <input type="number"
             class="ticketInput inp"
             placeholder="请输入您的券码"
             maxlength="8"
             v-model="cardNumber">
      <input type="number"
             class="tel inp"
             placeholder="请输入您的手机号"
             v-model="tel"
             maxlength="11">
      <input type="number"
             class="code inp"
             placeholder="请输入验证码"
             v-model="code">
      <button class="codetext"
              @click.stop="getCode()"
              :disabled="isDisabled">{{text}}</button>
      <span class="btn"
            @click="submitEvent()"></span>
    </scroll-view>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      cardNumber: "",
      link: "http://test.h5.ameimeika.com/ticket/index.html",
      user_token: "",
      isDisabled: false,
      text: "发送验证码",
      tel: "",
      code: "",   //验证码
      timing: "",
      interval: ""
    };
  },
  onLoad (options) {
    this.tel = '';
    this.cardNumber = '';
    this.code = '';
    this.timing = ''
    this.text = '发送验证码';
    this.isDisabled = false;
    clearInterval(this.interval);
  },
  onShow () { },
  methods: {
    getCode () {  //获取短信验证码
      if (!this.tel) {
        common.mmk_Loading(2, '请输入手机号');
        return false;
      }
      var that = this;
      that.timing = 90;
      that.interval = setInterval(function () {
        if (--that.timing > 0) {
          that.text = '等待' + that.timing + '秒';
          that.isDisabled = true;
        } else {
          that.text = '重新发送';
          that.isDisabled = false;
          clearInterval(interval);
        }
      }, 1000);
      common.mmk_Loading(0)
      common.fly_post("api/v4_5/card_ticket/sms_code", {
        phone: this.tel,
      }, result => {
        common.mmk_Loading(1);
        let res = result.data;
        if (res.status_code == 0) {
          common.mmk_Loading(2, '短信已发送至你的手机,注意查收');
        } else {
          common.mmk_Loading(2, res.message);
        }
      })


    },
    submitEvent () {
      if (!this.cardNumber) {
        common.mmk_Loading(2, "请输入券码")
        return false;
      }
      if (!this.code) {
        common.mmk_Loading(2, "请输入验证码")
        return false;
      }
      if (!this.tel) {
        common.mmk_Loading(2, "手机号")
        return false;
      }
      if (!(/^1(3|4|5|6|7|8)\d{9}$/.test(this.tel))) {
        common.mmk_Loading(2, "请输入正确手机号")
        return false;
      }
      common.mmk_Loading(0)
      common.fly_post("api/v4_5/card_ticket/is_active_card", {
        code: this.cardNumber,
        mobile: this.tel,
        verify_code: this.code
      }, result => {
        common.mmk_Loading(1);
        let res = result.data;
        if (res.status_code == 2203) {
          common.mmk_Loading(2, res.message);
          this.cardNumber = "";
          this.tel = "";
          this.code = "";
        } else {
          common.mmk_Loading(2, res.message);
        }
      })

    },
    scroll () { },
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  // display: flex;
  position: relative;
  .img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .inp {
    width: 81%;
    height: 47px;
    line-height: 47px;
    position: absolute;
    left: 9%;
    background-color: #fff;
    border-radius: 23px;
    padding-left: 22px;
    box-sizing: border-box;
    &::placeholder {
      color: #999;
    }
  }
  .ticketInput {
    top: 368px;
  }
  .tel {
    top: 428px;
  }
  .code {
    top: 486px;
  }
  .btn {
    width: 82.4%;
    height: 59px;
    border-radius: 20px;
    color: #963800;
    font-size: 17px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    position: absolute;
    top: 552px;
    left: 8.7%;
    background-image: url("https://h5.ameimeika.com/mp_images/mp_2.5/anniu.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .codetext {
    width: 100px;
    height: 35px;
    border: 1px solid #fe5a69;
    color: #fe5a69;
    border-radius: 17px;
    position: absolute;
    top: 492px;
    right: 11%;
    text-align: center;
    line-height: 35px;
    font-size: 14px;
    z-index: 999;
  }
}
</style>


